<!--
 * @Author: 哈兰德
 * @Description: 设置热区组件，主要使用vue-draggable-resizable组件改变区域尺寸
-->
<template>
  <div>
    <el-dialog
      :show-close="false"
      title="热区设置"
      width="850px"
      :visible="dialogVisible"
    >
      <img src="~/assets/image/common/hotarea.png" height="50px" />
      <div class="hot-image">
        <div class="left">
          <img ref="imagebox" :src="imageObject.image" />
          <div
            class="drag-area"
            :style="{height: dragAreaHeight + 'px', width: dragAreaWidth + 'px'}"
          >
            <vue-draggable-resizable
              v-for="(item, index) in areaList"
              :key="item._id"
              :z="999"
              :w="item.w"
              :h="item.h"
              :x="item.x"
              :y="item.y"
              :parent="true"
              class="drag-block"
              @dragging="onDrag"
              @resizing="onResize"
              @activated="onActivated(item)"
            >
              {{ '热区' + (index + 1) }}
            </vue-draggable-resizable>
          </div>
        </div>
        <div class="right">
          <div
            v-for="(item, index) in areaList"
            :key="item._id"
            class="link-list"
          >
            <div>{{ '热区' + (index + 1) }}</div>
            <el-input
              v-model="item.link"
              placeholder="跳转URL,格式http://或https://开头"
            />
            <div>
              <i
                title="删除"
                class="el-icon-delete"
                @click="removeItem(index)"
              ></i>
            </div>
          </div>

          <div class="flex-row-center">
            <el-button
              size="mini"
              @click="addItem()"
            >
              添加热区
            </el-button>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveData">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tool from '@/util/tool'
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

export default {
  components: {
    VueDraggableResizable
  },
  props: {
    imageObject: {
      type: Object,
      required: true
    },
    limitNum:{
      type:Number,
      default:0
    } ,
    autoUrl:{
      type:String,
      default:''
    } 
  },
  data () {
    return {
      dialogVisible: false,
      areaList: [],
      activatedArea: {},
      dragAreaHeight: 0,
      dragAreaWidth: 0
    }
  },
  watch: {
    dialogVisible (value) {
      if (!value) return
      this.areaList = []
      this.$nextTick(() => {
        this.dragAreaHeight = this.$refs.imagebox.offsetHeight
        this.dragAreaWidth = this.$refs.imagebox.offsetWidth
        if (this.imageObject.hotAreaList.length === 0) {
          this.addItem()
        } else {
          this.reshowArea()
        }
      })
    }
  },
  methods: {
    onDrag (x, y) {
      let block = this.areaList.find(a => a._id === this.activatedArea._id)
      block.x = x
      block.y = y
    },
    onResize (x, y, width, height) {
      let block = this.areaList.find(a => a._id === this.activatedArea._id)
      block.w = width
      block.h = height
      block.x = x
      block.y = y
    },
    onActivated (item) {
      this.activatedArea = item
    },
    saveData () {
      const w = this.dragAreaWidth
      const h = this.dragAreaHeight
      let result = this.areaList.map(area => {
        area.w = area.w / w
        area.h = area.h / h
        area.x = area.x / w
        area.y = area.y / h
        return area
      })
      result = result.filter(each => each.link)
      this.$emit('callback', tool.deepCopy(result))
      this.dialogVisible = false
    },
    openDialog () {
      this.dialogVisible = true
    },
    addItem (model) {
      let length = this.areaList.length

      if (this.limitNum && length >= this.limitNum) {
        this.$message.error('最多' + this.limitNum + '个热区，不能再增加了！')
        return
      }
      if (!model) {
        let item = {
          _id: tool.guid(),
          x: length * 10,
          y: length * 10,
          w: 100,
          h: 80,
          link: this.autoUrl ? this.autoUrl : ''
        }
        this.areaList.push(item)
      } else {
        this.areaList.push(model)
      }
    },
    removeItem (index) {
      this.areaList.splice(index, 1)
    },
    reshowArea () {
      const height = this.dragAreaHeight
      const width = this.dragAreaWidth
      this.imageObject.hotAreaList.forEach(element => {
        const item = { ...element }
        item.x = width * element.x
        item.y = height * element.y
        item.w = width * element.w
        item.h = height * element.h
        this.addItem(item)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.hot-image {
  border: 1px solid #ccc;
  width: 100%;
  display: flex;
  .drag-block {
    background: rgba(51, 136, 255, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .drag-area {
    position: absolute;
    top: 154px;
    overflow: hidden;
  }
  .left {
    width: 68%;
    border-right: 1px solid #ccc;
    img {
      width: 100%;
    }
  }

  .right {
    width: 400px;
    max-height: 400px;
    overflow: auto;
  }

  .link-list {
    margin-top: 10px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    .el-icon-delete {
      margin-left: 10px;
      font-size: 18px;
      cursor: pointer;
      margin-top: 15px;
    }
    .el-input {
      margin-left: 5px;
      width: 240px;
      margin-top: 5px;
    }
  }
  .flex-row-center {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
  }
}
</style>